<template>
    <div class="body">
        <van-cell v-for="item in remandlist" :key="item.proid" @click="goDetial(item.proid)">
            <img :src="item.img1" alt="">
            <p>{{ item.proname }}</p>
            <p class="price">￥{{ item.originprice }}</p>
        </van-cell>
    </div>
</template>

<script setup lang="ts">
// 引入接口推荐列表接口（用于购物车推荐商品渲染）
import {remandListApi} from '@/api/cartApi'
import { ref,type Ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
import {useRouter} from 'vue-router'
const Router = useRouter()

// 购物车推荐商品数据
let remandlist:any = ref<string[]>([])
// 调用推荐列表接口
let count:Ref<number> = ref(1)
let limitNum:Ref<number>  =ref(12)
interface rec{
    count:number,
    limitNum:number,
}
let values:rec={
    count:count.value,
    limitNum:limitNum.value,
}
remandListApi(values).then((res:any)=>{
    console.log('购物车推荐商品数据',res);
    remandlist.value = res.data
})

function goDetial(itemId:any){
    Router.push({path:'details',query:{itemId:itemId}})
}
</script>
<style scoped lang="scss">
.body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .van-cell {
        width: 50%;

        img {
            width: 100%;
            height: 60%;
        }

        p {
            -webkit-line-clamp:2;
            display:-webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price {
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
    }
}
</style>